<template>
  <div>
    <h1>用户评价</h1>
    <div class="remarkShow">
      <el-table :data="userremarklist" class="table">
        <el-table-column prop="time" label="日期" width="230"></el-table-column>
        <el-table-column prop="food.restaurant.rnickname" label="商家" width="180"></el-table-column>
        <el-table-column prop="food.fname" label="菜品" width="150"></el-table-column>
        <el-table-column prop="detail" label="评论" width="340"></el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteRemark(scope.row.reid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableData.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="tableData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserRemark',
  data () {
    return {
      tableData: {
        uid: window.sessionStorage.getItem('uid'),
        // 当前的页数
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 5
      },
      userremarklist: [],
      total: 0
    }
  },
  // 生命周期函数，加载页面前调用
  created () {
    // 获取用户收藏列表
    this.getUserRemarkList()
  },
  methods: {
    // 获取用户收藏列表
    async getUserRemarkList () {
      // 解构出data 并重命名为result
      // 请求路径为users，请求方式为get
      const { data: result } = await this.$axios.get('/user/getRemarks', { params: this.tableData })
      // 若状态码status不为2000 则说明获取用户列表失败
      if (result.status !== 2000) return this.$message.error('获取评论列表失败！')
      // 给当前对象的数据赋值
      this.userremarklist = result.data.remarks
      this.total = result.data.total
    },
    handleSizeChange (newSize) {
      this.tableData.pagesize = newSize
      this.getUserRemarkList()
    },
    // 监听当前所在页码数
    handleCurrentChange (newPage) {
      this.tableData.pagenum = newPage
      this.getUserRemarkList()
    },
    toMerDetails (id) {
      console.log(id)
    },
    // 删除评论
    async deleteRemark (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(confirmResult)
      // 点击确定删除时，返回字符串 confirm
      // 点击取消删除时，返回字符串 cancel
      if (confirmResult === 'cancel') {
        return this.$message.info('已取消删除')
      }
      const userId = { reid: id, uid: window.sessionStorage.getItem('uid') }
      // 发出删除用户的网络请求，请求方式为delete
      const { data: result } = await this.$axios.delete('/user/remark/delete', { params: userId })
      if (result.status !== 2000) {
        return this.$message.error('删除评论失败！')
      }
      this.$message.success('删除评论成功！')
      // 刷新用户列表
      await this.getUserRemarkList()
    }
  }
}
</script>

<style scoped>
.remarkShow{
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.table{
  width: 100%;

}
h1{
  text-align: center;
}
.el-pagination{
  margin-left: 300px;
}
</style>
